<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="bootstrap-3.3.4/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="Flat-UI-master/dist/css/flat-ui.min.css"/>
    <script src="bootstrap-3.3.4/dist/js/jquery-3.5.1.min.js"></script>
    <script src="bootstrap-3.3.4/dist/js/jquery.cookie-1.4.1.min.js"></script>
    <script src="bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
    <script src="Flat-UI-master/dist/js/flat-ui.min.js"></script>
    <script src="custom/util.js"></script>

    <title>我的订单</title>
    <style>
        .row {
            margin-left: 20px;
            margin-right: 20px;;
        }

        .line-center {
            line-height: 50px;
            text-align: center;
        }

        .row input {
            width: 50px;
        }

        .list-group-item:hover {
            background: #27ae60;

        }

        .list-group-item div:first-child:hover {
            cursor: pointer;
        }
    </style>

    <script>
        // 点击按钮 取消，
        function cancel(node) {
            $.ajax({
                url: url + "/order/sender/cancel",
                data: {
                    orderId: $(node).parent().attr("orderId")
                },
                type: "GET",
                success: function () {
                    // 把该订单隐藏
                    $(node).parent().parent().hide();
                },
                error: function () {
                    alert("取消订单失败，请联系开发者解决问题");
                }
            })
        }

        // 点击按钮 确认完成
        function confirm(node) {
            $.ajax({
                url: "/order/sender/confirm",
                data: {
                    orderId: $(node).parent().attr("orderId")
                },
                type: "GET",
                success: function () {
                    // 把 俩按钮 隐藏
                    $(node).prev().hide();
                    $(node).hide();
                    $(node).parent().prev().text("已完成");
                },
                error: function () {
                    alert("确认完成失败，请联系开发者解决问题");
                }
            })
        }
    </script>
</head>

<body>
<script>
    $(function () {
        // 允许跨域传cookie
        $.ajaxSetup({crossDomain: true, xhrFields: {withCredentials: true}});


        // 发一个请求获取全部订单
        // 后面可以改成每次拿10个
        $.ajax({
            url: url + "/order/sender/all",
            success: function (res) {
                if (res.flag === 5000) {
                    alert(res.data)
                    return;
                }

                for (var order of res.data) {
                    var node = document.createElement("div");
                    node.setAttribute("class", "col-sm-12 list-group-item");

                    // 发布时间
                    var timestamp = document.createElement("div");
                    timestamp.setAttribute("class", "col-sm-3 line-center");
                    timestamp.innerText = order.createTime.substring(0, 19).replace("T", " ");
                    node.append(timestamp)

                    // 描述
                    var description = document.createElement("div");
                    description.setAttribute("class", "col-sm-3 line-center");
                    description.innerText = order.description;
                    node.append(description)

                    // 订单价格
                    var price = document.createElement("div");
                    price.setAttribute("class", "col-sm-1 line-center");
                    price.innerText = order.price;
                    node.append(price)

                    // 接单人
                    var receiver = document.createElement("div");
                    receiver.setAttribute("class", "col-sm-2 line-center");
                    receiver.innerText = order.receiverName === null ? "无" : order.receiver;
                    node.append(receiver)

                    // 订单状态
                    var status = document.createElement("div");
                    status.setAttribute("class", "col-sm-1 line-center");
                    status.innerText = order.status;
                    node.append(status)


                    // 【操作】
                    var ops = document.createElement("div");
                    ops.setAttribute("class", "col-sm-2 line-center");
                    ops.setAttribute("orderId", order.id);
                    if (order.status == "未接单") {
                        var op1 = document.createElement("button");
                        op1.setAttribute("class", "btn btn-danger");
                        op1.setAttribute("onclick", "cancel(this);");
                        op1.innerText = "取消订单";

                        ops.append(op1);
                    } else if (order.status == "已接单" || order.status == "已送达") {
                        var op2 = document.createElement("button");
                        op2.setAttribute("class", "btn btn-success");
                        op2.setAttribute("onclick", "confirm(this);");
                        op2.innerText = "确认完成";

                        ops.append(op2);
                    }

                    node.append(ops)

                    $("div.list-group").append(node);
                }

            },
            error: function () {
                alert("获取用户订单失败，请联系开发者解决问题");
            }
        });

        // 注销
        $("#logout").click(function () {
            $("#logout").hide();
            $("#register").show();
            $("#login").show();
            $.ajax({
                url: url + "/user/logout",
                success: function (data) {
                    console.log("log out success")
                },
                error: function () {
                    console.log("error");
                }
            });
        });

        // // 查看当前登录状态
        // if ($.cookie("JSESSIONID") === null) {
        //     $("#register").show();
        //     $("#login").show();
        // } else {
        //     $("#logout").show();
        // }

        // 老的方式，再次使用
        $.ajax({
            url: url + "/user/check",
            success: function (data) {
                if (data["flag"] === 2000) {
                    // 已经登录了
                    $("#logout").show();
                } else {
                    // 还没登录
                    $("#register").show();
                    $("#login").show();
                }
            },
            error: function () {
                console.log("error");
            }
        });
    })
</script>

<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">这什么东西</span>
            </button>
            <a class="navbar-brand" href="Index.html">快递代取系统</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="Index.html">首页</a></li>
                <li><a href="NewOrder.html">创建订单</a></li>
                <li class="active"><a href="Order.html">我的订单</a></li>
                <li><a href="PickedOrder.html">我的接单</a></li>
                <li><a href="UserInfo.html">个人中心</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a id="login" href="Login.html" style="display: none;">登录</a></li>
                <li><a id="register" href="Register.html" style="display: none">注册</a></li>
                <li><a id="logout" href="#" style="display: none">注销</a></li>
                <li>
                    <a href="Cart.html"><span class="glyphicon glyphicon-shopping-cart">购物车</span></a>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>


<!--content-->
<div class="container">
    <div class="row thumbnail center">
        <div class="col-sm-12">
            <h1 class="text-center" style="margin-bottom: 30px">我的订单</h1>
        </div>


        <div class="col-sm-12 thumbnail">
            <div class="col-sm-3 line-center">发布时间</div>
            <div class="col-sm-3 line-center">描述</div>
            <div class="col-sm-1 line-center">价格</div>
            <div class="col-sm-2 line-center">接单人</div>
            <div class="col-sm-1 line-center">状态</div>
            <div class="col-sm-2 line-center">操作</div>
        </div>


        <!-- important -->
        <div class="list-group">
            <!--            <div class="col-sm-12  list-group-item" >-->
            <!--                <div class="col-sm-3 line-center" onclick="myClick(1)">ahiudsfhjk-23423-23asd-12</div>-->
            <!--                <div class="col-sm-3 line-center">未付款</div>-->
            <!--                <div class="col-sm-1 line-center">12</div>-->
            <!--                <div class="col-sm-2 line-center">big guy</div>-->
            <!--                <div class="col-sm-1 line-center">none</div>-->
            <!--                <div class="col-sm-2 line-center">-->
            <!--                    <button class="btn btn-danger">删除订单</button>-->
            <!--                    <button class="btn btn-success">提交订单</button>-->
            <!--                </div>-->
            <!--            </div>-->


        </div>

        <div>
            <div class="col-sm-12  list-group-item">
                <p style="text-align: center">点击显示更多</p>
            </div>
        </div>
    </div>


    <!--footer-->
    <div class="navbar navbar-default navbar-static-bottom">
        <p style="text-align: center">版权声明区</p>
    </div>
</body>
</html>